<template xmlns="">
  <div
    class="container"
    ref="container"
    :style="{ backgroundImage: `url(${bg})` }"
  >
    <div class="contain-box">
      <iframe src="/static/cube.html" frameborder="0" scrolling="no"></iframe>
      <div class="main">
        <ul class="images" :style="{ '--quantity': 6 }">
          <li
            v-for="(i, index) in 6"
            :key="i"
            :style="{ '--position': `${i}` }"
          >
            <img
              :src="`/images/scence${i}.png`"
              alt=""
              @click="toVR(index)"
              @mouseover="changeImage(`/images/scence${i}.png`, index)"
              @mouseleave="resetImage()"
            />
          </li>
        </ul>
      </div>
    </div>
    <footer>
      <header>
        <h1>{{ infoList[currentImageIndex].title }}</h1>
      </header>
      <div class="desc">
        <h3>{{ infoList[currentImageIndex].desc }}</h3>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, onBeforeMount, onBeforeUnmount } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

const container = ref(null);
const bg = ref("/images/home.png");

const currentImageIndex = ref(0);
const changeImage = (url, index) => {
  currentImageIndex.value = index + 1;
  bg.value = url;
};

const resetImage = () => {
  bg.value = "/images/home.png";
  currentImageIndex.value = 0;
};

const toVR = (index) => {
  currentImageIndex.value = index + 1;
  router.push(`/banner?index=${currentImageIndex.value}`);
};

const infoList = ref([
  { id: 0, title: "", desc: "" },
  { id: 1, title: "农业", desc: "一农不耕，民有为之饥者；一女不织，民有受其寒者。"},
  { id: 2, title: "医学", desc: "夫百病者，多以旦慧、昼安、夕加、夜甚。" },
  { id: 3, title: "天文", desc: "日月其除矣，四时斯发。" },
  { id: 4, title: "数学", desc: "方田今有田广十五步，从十六步。问为田几何？" },
  { id: 5, title: "化学", desc: "熬胆矾铁釜，久之亦化为铜。" },
  { id: 6, title: "地质", desc: "接待以来，以见东海三为桑田;向到蓬菜，水又浅于往日会时略半耳;岂将复为陵陆乎?" },
]);

onBeforeMount(() => {
  const hasRefreshed = localStorage.getItem("hasRefreshed");
  if (!hasRefreshed) {
    window.location.reload();
    localStorage.setItem("hasRefreshed", true);
  }
});

onBeforeUnmount(() => {
  localStorage.removeItem("hasRefreshed");
});
</script>

<style lang="scss" scoped>
@import "../styles/index.scss";
</style>
